<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>首页</title>
        <base href="${pageContext.request.contextPath}/">
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/style.css"/>

        <!--下面都是废话有需要就看，没需要就过-->
        <!--        图片轮播样式---瞎搞什么轮播？？行内块元素就完事了。服了！！！！
                owl css
                <link rel="stylesheet" href="css/owl.carousel.min.css">
                <link rel="stylesheet" href="css/owl.theme.default.min.css">
                owl.js
                <script src="js/owl.carousel.min.js"></script>
                wow.min动画效果-配合animate.css使用
                        animate css
                <link rel="stylesheet" href="css/animate.css">
                wow.min
                <script src="js/wow.min.js"></script>
        
                html5shiv
                <script src="js/html5shiv.js"></script>
                    html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
                    respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
                respondl
                <script src="js/respond.min.js"></script>
        
                prettifyl代码高亮？？？？？？什么鬼玩意？？？？
                <script src="js/prettify.js"></script>
        
                bootstrap-datepicker日期相关
                <script src="js/bootstrap-datepicker.js"></script>
        
                custom自动补全插件-不好用
                <script src="js/custom.js"></script>-->
    </head>

    <body>
        <!--    页面载入效果  不知道咋回事 图片一直转 不跳到首页，搞不明白，效果出不来也不强求了
                 <div id="preloader">
                            <div id="status">&nbsp;</div>
                        </div>-->
        <!--头部-->
        <div class="header-most-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-8 col-sm-8 col-12">
                        <div class="main-flex-top">
                            <div class="email sel d-flex">
                                <div class="main-email-text d-flex">
                                    <i class="glyphicon glyphicon-envelope"></i>
                                    <p>123@XZ.com</p>
                                </div>
                                <div class="main-loc-text d-flex">
                                    <i class="glyphicon glyphicon-map-marker"></i>
                                    <p>书香四溢</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-4 col-sm-4 col-12">
                        <div class="login-area">
                            <div class="seclict-area">
                                <i class="glyphicon glyphicon-home" style="color: #e9dbf0;"></i>
                                <select name="cars">
                                    <option value="volvo">CN</option>
                                    <option value="saab">US</option>
                                    <option value="fiat">GE</option>
                                    <option value="audi">FRANCH</option>
                                </select>
                            </div>
                            <div class="user-log">
                                <i class="glyphicon glyphicon-user"></i>
                                <!--<a href="test/loginuser?name=登录人">登录&nbsp;|</a>-->
                                <a href="toLogin">登录&nbsp;|</a>
                                <a href="to_add_user">注册</a>
                                <a href="manager">管理员</a>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--导航栏-->
    <header id="top-heder-nav">
        <nav class="navbar navbar-expand-lg" data-toggle="sticky-onscroll">
            <div class="container">
                <a class="navbar-brand" href="index">
                    <img src="img/logo.png" alt="">
                </a>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link active" href="index">首页</a></li>
                <li class="nav-item"><a class="nav-link active" href="l/lindex">图书日志</a></li>
                        <li class="nav-item"><a class="nav-link active" href="l/aindex">读书活动</a></li>
                    </ul>
                </div>

                <div class="left-menu-pho">
                    <div class="icon-phon-men">
                        <i class="glyphicon glyphicon-leaf"></i>
                    </div>
                    <div class="phone-number-idel">
                        <h4>世界那么大</h4>
                        <p>我想去看看</p>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- 巨幕-->
    <section id="banner-home">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-10 col-sm-12 col-12">
                    <div class="banner-text-home wow fadeInUp" data-wow-duration="2s">
                        <h6>WELCOME TO </h6>
                        <h1>书 籍 的 世 界</h1>
                        <p>“喜欢读书，就等于把生活中寂寞无聊的时光换成巨大享受的时刻”</p>
                        <p style="margin-left: 450px;">——孟德斯鸠</p>
                        <div class="button-common">
                            <a href="#!" class="btn btn-1">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-2 col-sm-12 col-12">
                    <div class="video-play-banner">
                        <a href="#" data-width="800" data-height="880" class="video-play-btn video-link"><i class="glyphicon glyphicon-film"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--  巨幕 end-->


    <!--内容介绍1-->
    <section id="ab-home">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <div class="left-side-text-ab max-live">
                        <h6>山河滚烫，你是人间理想</h6>
                        <h2>关于我们 ——<span>慢时光</span> 书记 </h2>
                        <p>遨游书海，在书籍的某段只字片语中，突然重新认识自己。</p>
                        <p>慢时光——分享你的所见，感受世界的奇妙。去拥抱陌生，去期待惊喜，所有的不期而遇都在路上。</p>
                        <a href="#!" class="btn btn-2 mar-top">了解更多</a>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="ab-slider">
                        <div class="slider-main-ab owl-carousel owl-theme">
                            <img src="img/ab-1.png" alt="">
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 内容介绍1 end-->

    <div class="keep">
        <div class="container">
            <h3 class="tittle-one">在这广阔的银河系里，你做好你的自转星，而我就做那公转星。</h3>
            <br>
            <p>我不需要你离我太近，我只要能在你的轨迹中运行。你有你的四季，而我亦有我的坚持。</p>
        </div>
    </div> 

    <!-- 一块块的东西 start-->
    <section id="tour-des">
        <div class="content-box">
            <h6>趁兴而行，和你一起处处都是好风景</h6>
            <h2>Select your <span>Destination</span></h2>
            <p>一个人在旅行时会听得到自己的声音，它会告诉你，这个世界比你想象的辽阔 </p>
        </div>
        <div class="container">
            <div class="slider-des owl-carousel owl-theme">
                <div class="des-cov">
                    <div class="des-img">
                        <a href="activity/findActivity?id=A00001"><img src="img/d-1.png" alt=""></a>
                    </div>
                    <div class="des-para">
                        <div class="dayt">
                            <h6><a href="activity/findActivity?id=A00001">80天环游地球</a></h6>
                            <p>[法]儒勒·凡尔纳</p>
                        </div>
                        <div class="real-dat-para">
                            <p>著名科学幻想小说，主人公菲利斯·福格与牌友们打赌，坚信能在80天内完成环游，并付诸行动。</p>
                        </div>
                        <div class="des-button-icon">
                            <div class="das-into-btn">
                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                            </div>
                            <div class="start-icon-des">
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="des-cov">
                    <div class="des-img">
                        <a href="#!"><img src="img/d-2.png" alt=""></a>
                    </div>
                    <div class="des-para">
                        <div class="dayt">
                            <h6><a href="#!">达瓦更扎 神木垒</a></h6>
                            <p>3day 1000￥</p>
                        </div>
                        <div class="real-dat-para">
                            <p>傍晚的阳光金黄而辽远，四季交替却如此温情。</p>
                        </div>
                        <div class="des-button-icon">
                            <div class="das-into-btn">
                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                            </div>
                            <div class="start-icon-des">
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="des-cov">
                    <div class="des-img">
                        <a href="#!"><img src="img/d-3.png" alt=""></a>
                    </div>
                    <div class="des-para">
                        <div class="dayt">
                            <h6><a href="#!">悉尼</a></h6>
                            <p>5day 7380￥</p>
                        </div>
                        <div class="real-dat-para">
                            <p>黄昏中的歌剧院，是一天中旅客最少的时候，坐着岸边的Opera Kitchen，小尝咖啡和西式蘑菇炒滑蛋，凝望......</p>
                        </div>
                        <div class="des-button-icon">
                            <div class="das-into-btn">
                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                            </div>
                            <div class="start-icon-des">
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="des-cov">
                    <div class="des-img">
                        <a href="#!"><img src="img/d-4.png" alt=""></a>
                    </div>
                    <div class="des-para">
                        <div class="dayt">
                            <h6><a href="#!">现实版的千与千寻</a></h6>
                            <p>1day 160￥</p>
                        </div>
                        <div class="real-dat-para">
                            <p>重庆——一座来了就不想走的城市，流连忘返于华灯初上的山城夜景。万家灯火，层见叠出，两江波澄银树......</p>
                        </div>
                        <div class="des-button-icon">
                            <div class="das-into-btn">
                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                            </div>
                            <div class="start-icon-des">
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="des-cov">
                    <div class="des-img">
                        <a href="#!"><img src="img/d-5.png" alt=""></a>
                    </div>
                    <div class="des-para">
                        <div class="dayt">
                            <h6><a href="#!">梦中的岛屿</a></h6>
                            <p>3day 500￥</p>
                        </div>
                        <div class="real-dat-para">
                            <p>灼热的阳光，涩的海水，咸的海风，甜的笑，美好事物的一切</p>
                        </div>
                        <div class="des-button-icon">
                            <div class="das-into-btn">
                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                            </div>
                            <div class="start-icon-des">
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="des-cov">
                    <div class="des-img">
                        <a href="#!"><img src="img/d-6-1.png" alt=""></a>
                    </div>
                    <div class="des-para">
                        <div class="dayt">
                            <h6><a href="#!">北京的冬</a></h6>
                            <p>5day 1380￥</p>
                        </div>
                        <div class="real-dat-para">
                            <p>等到北京城下雪，我们一起去故宫看雪可好？</p>
                        </div>
                        <div class="des-button-icon">
                            <div class="das-into-btn">
                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                            </div>
                            <div class="start-icon-des">
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                                <i class="glyphicon glyphicon-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!--
    <!-- 一块块的东西 end-->


    <!--尾部-->
    <div class="footre-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-8 col-8">
                    <div class="copy-right-para">
                        <p>版权所有 &copy; 2020.张彦 陈新 董娅楠 郭颖倩</p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-4 col-sm-4 col-4">
                    <div class="copy-right-icon">
                        <a href="#"><i class="glyphicon glyphicon-thumbs-up face no-ag"></i></a>
                        <a href="#"><i class="glyphicon glyphicon-gift face"></i></a>
                        <a href="#"><i class="glyphicon glyphicon-heart-empty face"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--尾部结束-->

</body>
</html>
